<!-- 交补天数 -->
<template>
    <div class="div-box">
        <div class="acea-row row-right mb15 ">
            <a-input-search placeholder="工号/姓名" enter-button @search="onSearch" style="width: 200px;margin-right: 15px;" v-model="key"/>
            <a-month-picker  v-model="day" :disabled-date="disabledDate" placeholder="选择日期" @change="dateChange"  :defaultValue="day"
  valueFormat="YYYY-MM"/>
            <a-button type="primary" class="ml15" @click="exports">导出</a-button>
        </div>
        
        <a-table :columns="columns" :data-source="data" bordered size="middle" :rowKey="record => record.wokecode" :loading="loading">
            <template #expandedRowRender="{ record }">
                <p style="margin: 0">
                    {{ record.dates }}
                </p>
            </template>
        </a-table>
    </div>
</template>
<script>
import { defineComponent } from 'vue';
import moment from "moment";
import { request } from "../../utils/request";
const columns = [
    {
        title: '工号',
        dataIndex: 'wokecode',
        key: 'workcode',
    },
    {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '交补天数',
        dataIndex: 'ts',
        key: 'ts',
    },
];
const data = [];
export default defineComponent({
    data() {
        return {
            data,
            columns,
            key:'',
            day:moment().subtract(1,'month').startOf('month').format('YYYY-MM'),
            loading: false
        };
    },
    methods: {
        init() {
            this.list();  
        },
        list() {
            this.loading = true
            let params = {
                day: this.day,
                key: this.key
            }
            request({
                url: "/api/jbts",
                method: "get",
                params
            }).then((res) => {
                this.data = res;
                this.loading = false
            });
            // end
        },
        exports() {
            let params = {
                day: this.day,
                key: this.key
            }
            request({
                url: "/api/jbts/export",
                method: "get",
                params
            }).then((res) => {
                window.location.href = `api` + res;
            });
        },
        onSearch(value) {
            this.key = value
            this.list()
        },
        dateChange(e) {
           this.day = e;
           this.list()
        }
    },
    created() {
        this.init();
    },
});
</script>
<style scoped>
.div-box {
    padding: 20px;
}
</style>